<template>
  <view class="news-page">
    <!-- 顶部：天气+搜索 -->
    <view class="top-bar">
      <view class="weather">
        <text>小桂林 PM2.59</text>
        <text>4℃ 更冷了 15条内容</text>
      </view>
      <view class="search" @click="toSearch">
        <text>搜索新闻</text>
      </view>
    </view>

    <!-- 新闻分类栏 -->
    <scroll-view class="category" scroll-x>
      <view class="category-item" v-for="(item, index) in categoryList" :key="index">
        {{ item.name }}
      </view>
    </scroll-view>

    <!-- 新闻列表 -->
    <scroll-view 
      class="news-list" 
      @scrolltolower="loadMore"
      enable-back-to-top
    >
      <view class="news-item" v-for="(item, index) in newsList" :key="index" @click="toDetail(item.id)">
        <image :src="item.cover" class="news-cover"></image>
        <view class="news-info">
          <text class="news-title">{{ item.title }}</text>
          <text class="news-desc">{{ item.desc }}</text>
          <text class="news-time">{{ item.time }}</text>
        </view>
      </view>
      <!-- 广告插入 -->
      <view class="ad-item" v-if="index === 2">
        <image src="/static/ad.png" class="ad-img"></image>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      categoryList: [], // 新闻分类
      newsList: [],     // 新闻列表
      page: 1,          // 分页页码
      pageSize: 10      // 每页数量
    };
  },
  onLoad() {
    this.getCategory(); // 获取分类
    this.getNewsList(); // 获取新闻列表
  },
  onPullDownRefresh() {
    // 下拉刷新：重置页码，重新请求数据
    this.page = 1;
    this.getNewsList(() => {
      uni.stopPullDownRefresh(); // 结束刷新
    });
  },
  methods: {
    // 获取新闻分类
    getCategory() {
      // 实际项目替换为接口请求
      this.categoryList = [
        { name: "要闻" }, { name: "推荐" }, { name: "关注" },
        { name: "24小时" }, { name: "财经" }, { name: "娱乐" }
      ];
    },
    // 获取新闻列表（参数：回调函数）
    getNewsList(callback) {
      // 模拟接口请求（实际用uni.request/uniCloud.callFunction）
      uni.showLoading({ title: "加载中" });
      setTimeout(() => {
        const mockData = [
          {
            id: 1,
            cover: "/static/news1.png",
            title: "2020，我们重逢的记忆",
            desc: "森林大火57年大火怎么被控制的",
            time: "2小时前"
          },
          {
            id: 2,
            cover: "/static/news2.png",
            title: "中国各年北水旱情况",
            desc: "论春冬各险在中的重要性？人们应不应该买保险？",
            time: "5小时前"
          }
        ];
        if (this.page === 1) {
          this.newsList = mockData;
        } else {
          this.newsList = [...this.newsList, ...mockData];
        }
        uni.hideLoading();
        callback && callback();
      }, 1000);
    },
    // 上拉加载更多
    loadMore() {
      this.page++;
      this.getNewsList();
    },
    // 跳转到搜索页
    toSearch() {
      uni.navigateTo({ url: "/pages/search/search" });
    },
    // 跳转到新闻详情
    toDetail(newsId) {
      uni.navigateTo({ url: `/pages/newsDetail/newsDetail?newsId=${newsId}` });
    }
  }
};
</script>

<style scoped>
/* 样式省略，可根据原型图自行编写 */
.news-page { padding: 10rpx; }
.top-bar { display: flex; justify-content: space-between; margin-bottom: 20rpx; }
.category { white-space: nowrap; margin-bottom: 20rpx; }
.category-item { display: inline-block; padding: 0 20rpx; }
.news-list { height: calc(100vh - 200rpx); }
.news-item { display: flex; margin-bottom: 20rpx; }
.news-cover { width: 200rpx; height: 150rpx; }
.news-info { flex: 1; margin-left: 20rpx; }
</style>